﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery后代遍历children()的应用</title>
        <script src="js/jquery-1.12.4.js"></script>
        <style>
            div { width: 300px; }
            span { display: block; }
            ul { list-style: none; }
            div,ul,p,li,span {border: 1px solid gray;padding: 10px;
                margin: 10px;background-color: white;}
        </style>
    </head>
    <body>
        曾祖父body
        <div>
            祖父元素div
            <ul>
                父元素ul
                <li>元素li</li>
                <li>元素li</li>
            </ul>
            <p>
                父元素p
                <span>元素span</span>
            </p>
        </div>
        <script>
            $(document).ready(function() {
                $("div").children().css({
                    border: "1px solid red",
                    backgroundColor: "pink"
                });
            });
        </script>
    </body>
</html>